import React from 'react';
import styles from './index.less';
import { connect } from 'dva';
const creator = (type, payload) => ({ type, payload });
class Article extends React.Component {
  state = {
    contentMenu: 'none',
    translationDisplay: 'none',
    left: 0,
    top: 0,
    translationText: '',
    content: '',
    isBold:false
  };
  componentDidMount() {
    const { dispatch } = this.props;
    const _this = this;
    dispatch(creator('title/getTitles'));

    // const oContainer = document.getElementById("container");
    // oContainer.innerHTML += content;

    //获取可视区宽度
    var winWidth = function() {
      return document.documentElement.clientWidth || document.body.clientWidth;
    };
    //获取可视区高度
    var winHeight = function() {
      return document.documentElement.clientHeight || document.body.clientHeight;
    };
    var menu = document.getElementById('menu');
    document.addEventListener('click', function(event) {
      _this.setState({ contentMenu: 'none' });
    });
    menu.addEventListener('click', function(event) {
      var event = event || window.event;
      event.preventDefault();
    });
    //右键菜单
    document.oncontextmenu = function(event) {
      var event = event || window.event;
      _this.setState({
        contentMenu: 'block',
        translationDisplay: 'none',
        translationText: event.target.dataset.v,
        content: event.target.dataset.c,
        isBold: JSON.parse(event.target.dataset.b).bold
      });

      var l, t;
      l = event.clientX;
      t = event.clientY;
      if (l >= winWidth() - menu.offsetWidth) {
        l = winWidth() - menu.offsetWidth;
      } else {
        l = l;
      }
      if (t > winHeight() - menu.offsetHeight) {
        t = winHeight() - menu.offsetHeight;
      } else {
        t = t;
      }
      _this.setState({
        left: l,
        top: t,
      });

      return false;
    };
  }

  clickHandle = id => {
    const { dispatch } = this.props;
    dispatch(creator('paragraph/getContent', id));
  };
  showChinese = e => {
    e.preventDefault();
    this.setState({
      contentMenu: 'none',
      translationDisplay: 'block',
    });
  };
  bold = e => {
    const { dispatch } = this.props;
    let obj = JSON.parse(this.state.content);
    let { content } = obj;
    let index = content.findIndex(item => item.translationText === this.state.translationText);
    content[index].bold = !content[index].bold;
    dispatch(
      creator('paragraph/editParagraphs', {
        _id: obj._id,
        content: JSON.stringify(content),
      }),
    ).then(res => {
      if (res.httpStatus === 200) {
        this.props.dispatch(creator('paragraph/getContent', obj.id));
      }
    });
    e.preventDefault();
    this.setState({
      contentMenu: 'none',
      translationDisplay: 'none',
    });
  };
  render() {
    const { title, paragraph } = this.props;
    const { content } = paragraph;
    const { titles } = title;
    return (
      <div className={styles.container}>
        <div className={styles.left}>
          <h3>Articles</h3>
          <ul className={styles.ul}>
            {titles.map(item => (
              <li className={styles.li} key={item._id}>
                <a onClick={this.clickHandle.bind(this, item.id)} className={styles.a}>
                  {item.title}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className={styles.middle} id="middle">
          <h3 data-v={content[0] && content[0].chineseTitle}>
            {content[0] && content[0].englishTitle}
          </h3>
          {content.map(i => {
            const pContent = i.content.map(j => (
              <span
                className={j.bold ? styles.bold : ''}
                key={j.originText}
                data-v={j.translationText}
                data-c={JSON.stringify(i)}
                data-b={JSON.stringify({bold:j.bold})}
              >
                {j.originText}{' '}
              </span>
            ));
            return (
              <div key={i._id}>
                <b>{i.subTitle === '无' ? '' : i.subTitle}</b>
                <p>{pContent}</p>
              </div>
            );
          })}
          <p>{content[0] && content[0].author}</p>
          <p>
            <a target="_blank" href={content[0] && content[0].sourceUrl}>
              {content[0] && content[0].sourceUrl}
            </a>
          </p>
        </div>
        <div className={styles.right}>
          <div style={{ display: this.state.translationDisplay }}>{this.state.translationText}</div>
        </div>
        {/* 右击菜单 */}
        <ul
          className={styles.menu}
          style={{ display: this.state.contentMenu, left: this.state.left, top: this.state.top }}
          id="menu"
        >
          <li>
            <a href="" onClick={this.bold.bind(this)}>
              {this.state.isBold?'取消加粗':'加粗'}
            </a>
          </li>
          <li>
            <a href="">加入疑难杂句</a>
          </li>
          <li>
            <a onClick={this.showChinese.bind(this)}>显示译句</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default connect(({ title, paragraph }) => ({ title, paragraph }))(Article);
